<script setup lang="ts">
import { useUserStore } from '../stores'

// 获取用户状态
const userStore = useUserStore()
</script>

<template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">首页</h1>
    
    <div class="bg-white rounded-lg shadow p-6">
      <p class="mb-4">欢迎使用Vue3全家桶项目模板</p>
      
      <div v-if="userStore.isLoggedIn" class="mb-4">
        <p>当前用户: {{ userStore.userInfo.username }}</p>
      </div>
      <div v-else class="mb-4">
        <p>您尚未登录</p>
      </div>
      
      <div class="mt-4">
        <router-link 
          to="/about" 
          class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          关于页面
        </router-link>
      </div>
    </div>
  </div>
</template>